// 需要轮播的图片数据
const imgList = [
    './images/5.jpg',
    './images/6.jpg',
    './images/7.jpg',
    './images/8.jpg',
    './images/5.jpg',
    './images/6.jpg',
    './images/7.jpg',
    './images/8.jpg',
]

/* 将功能抽象出来 交给相对应的对象去处理 这就是面对对象的初步思想 */
// 抽象一个轮播图对象
const lunBo = {
    len: imgList.length, // 轮播数量
    el: document.querySelector('.list'), // 轮播区域
    current: 0, // 当前轮播的图片
    delay: 5000, // 切换时间
    init: function () { // 轮播环境初始化
        let str = ''
        // 预加载图片
        imgList.forEach(img => {
            str += `<li class="fl_l"><img src="${img}" alt="error"></li>`
        })

        // 渲染图片
        this.el.style.width = `${800 * this.len}px`
        this.el.innerHTML = str
    },
    changeDir: function (n) { // 轮播方向
        this.current += n

        // 控制左边界
        if (this.current < 0) {
            this.current = this.len - 1
        }

        // 控制右边界
        if (this.current > this.len - 1) {
            this.current = 0
        }

    },
    render: function () { // 渲染状态
        this.el.style.transform = `translateX(${-800 * this.current}px)`
    },
    register: function () { // 切换事件按钮注册
        // 切换按钮
        this.left = document.querySelector('.left')
        this.right = document.querySelector('.right')

        // 切换图片
        this.left.onclick = () => {
            /* 
            // 修改状态
            this.current--
            // 边界控制
            if (this.current < 0) {
                this.current = 0
            }
             */

            // 切换方向 向左移动一张
            this.changeDir(-1)
            // 渲染状态
            // this.el.style.transform = `translateX(${-800 * this.current}px)`
            this.render()
        }

        this.right.onclick = () => {
            /* 
            this.current++

            if (this.current > this.len - 1) { // 保证所有图片都能被渲染出来
                this.current = this.len - 1
            }
            */

            this.changeDir(1) // 向右移动一张
            // this.el.style.transform = `translateX(${-800 * this.current}px)`
            this.render()

        }
    },
    unregister: function () { // 注销点击事件
        this.left.onclick = this.right.onclick = null
    },
    aotuPlay: function () { // 自动播放
        this.timer = setInterval(() => {
            this.changeDir(1)
            this.render()
        }, this.delay)
    },
    stop: function () { // 停止自动播放
        clearInterval(this.timer)
    }
}

lunBo.init()
lunBo.register()
// lunBo.unregister()

lunBo.aotuPlay()
// lunBo.stop()


/*
    面向过程完成功能

// 图片数量
const LEN = imgList.length

// 轮播主体
const ul = document.querySelector('.list')

// 当前图片是第几张
let current = 0

// 初始化页面
function init({
    len,
    el
}) {
    let str = ''
    // 预加载图片
    imgList.forEach(img => {
        str += `<li class="fl_l"><img src="${img}" alt="error"></li>`
    })

    // 渲染图片
    el.style.width = `${800 * len}px`
    el.innerHTML = str
}

// 注册点击事件
function register({
    len,
    el,
    current
}) {
    // 切换按钮
    const left = document.querySelector('.left')
    const right = document.querySelector('.right')

    // 切换图片
    left.addEventListener('click', () => {
        // 修改状态
        current--
        // 边界控制
        if (current < 0) {
            current = 0
        }
        // 渲染状态
        el.style.transform = `translateX(${-800 * current}px)`
    })

    right.addEventListener('click', () => {
        current++

        if (current > len - 1) { // 保证所有图片都能被渲染出来
            current = len - 1
        }
        el.style.transform = `translateX(${-800 * current}px)`
    })
}

init(state)
register(state)

*/